<template>
	<view class="statusBar" v-if="show">
		<view class="fixed-content" :class="{'box-shadow':showBoxShadow}" :style="{'background':backgroundColor}">
			<view :style="{'height':barHeight + 'px'}"></view>
			<view class="bar-content" :style="{'height':$common.getNavBarHeight(height)+'px'}">
				<slot>
					<template v-if="backBtn">
						<image v-if="titleColor=='#fff' || backgroundColor=='rgba(255, 255, 255, 0)'" @tap="$common.navigateBack()" class="nav-left" src="/static/img/common/arrow-left-white.png" mode=""></image>
						<image v-else  @tap="$common.navigateBack()" class="nav-left" src="/static/img/common/arrow-left.png" mode=""></image>
					</template>
					<view class="nav-title" :style="{color:titleColor || (backgroundColor=='rgba(255, 255, 255, 0)'?'#fff':'#000'),textAlign:textAlign}">{{title}}</view>
				</slot>
			</view>
		</view>
		<!-- 高度 -->
		<view v-if="showBarHeight" :style="{'height':barHeight + $common.getNavBarHeight(height) + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		name:'StatusBar',
		props:{
			show:{
				type: Boolean,
				// #ifdef H5
				default:false,
				// #endif
				// #ifndef H5
				default:true,
				// #endif
			},
			backgroundColor:{
				type: String,
				default:'rgba(255, 255, 255, 0)'
			},
			titleColor:{
				type: String,
				default:''
			},
			title:{
				type: String,
				default:''
			},
			textAlign:{
				type: String,
				default:'center'
			},
			showBack:{
				type: Boolean,
				default:false
			},
			showBarHeight:{
				type: Boolean,
				default:true
			},
			showBoxShadow:{
				type: Boolean,
				default:false
			},
			height:{
				type: Number,
				default: 44
			},
		},
		data() {
			return {
				barHeight:uni.getSystemInfoSync()['statusBarHeight'],
				backBtn: false
			}
		},
		created() {
			this.backBtn = this.showBack || getCurrentPages().length>1
		}
	}
</script>

<style lang="scss" scoped>
	.statusBar{
		.fixed-content {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding: 0 24rpx;
			z-index: 991;
			transition: all .5s;
			.bar-content{
				display: flex;
				align-items: center;
				position: relative;
				::v-deep.flex-between-center{
					flex: 1;
				}
				.nav-left{
					width: 22px;
					height:22px;
					position: absolute;
					z-index: 2;
					top: 50%;
					transform: translateY(-50%);
				}
				.nav-title{
					color: #fff;
					font-weight: bold;
					font-size: 16px;
					width: 100%;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;
				}
			}
			&.box-shadow{
				box-shadow: 0rpx 2rpx 0rpx 0rpx #F5F5F5;
			}
		}
	}
</style>
